<template>
  <div class="t-body">
    <div class="t-header">
      <div><span v-for="(item, index) in listHeader" :key="index">{{ item.name }}</span></div>
    </div>
    <vue-seamless-scroll v-if="listData.length> 0" :data="listData" :class-option="optionHover" class="seamless-warp" :style="{height: height}">
      <ul ref="con1" class="con1">
        <li v-for="(item, index) in listData" :key="index">
          <el-tooltip v-if="item.proName" class="item" effect="dark" :open-delay="500" :content="item.proName" placement="top-start">
            <span class="to-link" @click="getProDetail(item.proId,item.proStatus)">{{ item.proName }}</span>
          </el-tooltip>
          <span v-else>{{ item.proName }}</span>

          <el-tooltip v-if="item.companyName" class="item" effect="dark" :open-delay="500" :content="item.companyName" placement="top-start">
            <span>{{ item.companyName }}</span>
          </el-tooltip>
          <span v-else>{{ item.companyName }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
    <div v-else class="no-data" :style="{height: height}">
      <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProjectTable',
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    listHeader: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '240px'
    }
  },
  data() {
    return {
      animate: false,
      needNum: 7
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.55, // 数值越大速度滚动越快
        limitMoveNum: this.needNum + 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  watch: {
    listData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length > 0) {
          this.needNum = Math.floor(parseInt(this.height) / 36)
          this.addTaleData(val.length, this.needNum)
        }
      }

    }
  },
  methods: {
    getProDetail(id, proStatus) {
      if (!id) return
      this.$store.commit('basicInfo/SET_ProId', id)
      this.$store.commit('basicInfo/SET_ProStatus', proStatus)
      this.$router.push({
        path: '/newProject/project-detail'
      })
    },
    // 补空白行
    addTaleData(listDataLength, needNum) {
      if (listDataLength < needNum) {
        const arr = {}
        this.listData.push(arr)
        this.addTaleData()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @mixin span($width:50%,$width01:30%,){
    &:first-child{
      width: $width;
    }
    &:last-child{
      width: $width01;
    }
  }
  .t-body{
    .t-header{
      span{
        width: 50%;
      }
    }
    .seamless-warp{
      .con1 {
        li{
          span{
            width: 50%;
          }
        }
      }
    }
  }

</style>
